<template>
  <view class="container">
    <view class="box">
      <view class="address">
        <view class="item">
          <view class="avatar">
            <u-avatar icon="home"></u-avatar>
          </view>
          <view class="message">
            <p class="head">红星社区</p>
            <p class="detail">四川省眉山市彭山区观音街道红星社区</p>
          </view>
          <view class="setting">
            <u-tag text="默认" plain size="mini" type="warning"></u-tag>
          </view>
        </view>
      </view>
    </view>

    <view class="addAddress">
      <u-button class="btn" type="success"><span>+</span>添加社区地址</u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    }
  }
</script>

<style lang="scss">
  .container {
    height: calc(100vh - 60px);
    position: relative;
    padding-bottom: 60px;

    .box {
      height: 95%;
      padding: 10px;

      .address {
        height: 100%;
        box-shadow: -1px -1px #eee, 1px 1px #eee;
        // border: 1px solid;
        border-radius: 5px;
        padding: 5px;

        .item {
          display: flex;

          .avatar {
            flex: 1;
          }

          .message {
            flex: 5;

            .head {
              font-size: 16px;
            }

            .detail {
              font-size: 12px;
              color: #82848a;
            }
          }

          .setting {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }

    .addAddress {
      background-color: #fff;
      position: fixed;
      bottom: 0;
      width: 100%;
      height: 50px;
    }

  }
</style>